<template xmlns="http://www.w3.org/1999/html">
  <div class="chefPane" id="chefPane">
    <div class="chefTitle">
    <div class="el-icon-fork-spoon"><span style="color: #000000">厨师介绍</span></div>
    </div>
    <div class="chefInfo" v-for="(chef,index) in chefs"  @mouseenter="outer(index)" @mouseleave="outerleave(index)" title="查看详情" >
      <a href="/front/chef/">
      <img :src="getImgsrc(chef.img)"/>
      <div class="outer">
        <div style="color: #ffffff;">
          <span>{{chefs[index].name }}</span><br/>
       <span>{{ chefs[index].desc }}</span>
        </div>
      </div>
      </a>
    </div>

  </div>
</template>

<script>
  import api from "../../../axios/api";

  export default {
    name: "chef",
    data() {
      return {
        chefs: []

      }
    },
    methods: {
      getImgsrc: function (imgsrc) {
        return "../../../static/images/chefImgs/" + imgsrc;
      },
      getchefImg () {
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/chefImg", null, "post")
          .then(res => {
            // console.log(res)
            this.chefs = res;
            console.log(res)
            // console.log(this.chefs.name)
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      setDataFromAxios: function () {
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/chefImg", null, "post")
          .then(res => {
            // console.log(res)
            this.chefs = res;
            console.log(res)
            // console.log(this.chefs.name)
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      outer(index){
        console.log(index);
        $($(".outer")[index]).css("bottom","0");
      },
      outerleave(index){
        console.log(index);
        $($(".outer")[index]).css("bottom","-80px");
      }
    },
    created() {
      this.getchefImg();
    }
  }
</script>

<style scoped lang="stylus">
  .chefPane
    content:""
    display:block
    clear:both  // 给父元素添加伪类清除浮动

    margin 0 auto
    width 1020px
    height 626px

    .chefTitle
      font-size 17px

      width 120 px
      height 24px
      .el-icon-fork-spoon
        color #ca151c
        font-weight 600

     .chefInfo
      margin-top 20px;
      margin-right: 3px;
      text-align center
      float left
      width 197px
      height 277px
      position: relative
      overflow: hidden
      border-radius 3px
      .outer
        transition  all 0.4s
        border-radius 5px
        color aliceblue
        font-size 15px
        bottom -80px
        opacity:0.8
        height 100px
        width 196px
        display: block
        position absolute

        background: #ca151c

      img
        width 196px
        height 277px
        bottom 0






</style>
